<template>
  <Card>
    <p slot="title">
      <Icon type="person"></Icon>
      个人信息
    </p>
    <Row>
      <Col>
        <Form ref="userForm" :model="userForm" :label-width="100" label-position="right" :rules="inforValidate">
          <FormItem label="头像" prop="head">
            <image-upload @on-upload-success="(url)=>{userForm.head = url}">
              <div class="img" :style="{border:userForm.head?'none':'1px dashed #ccc','border-radius':'50%'}">
                <img :src="userForm.head" v-if="userForm.head" style="border-radius:50%"/>
                <span v-if="userForm.head==null">+</span>
              </div>
            </image-upload>
          </FormItem>
          <FormItem label="用户昵称：" prop="nick">
            <div style="display:inline-block;width:250px;">
              <Input v-model="userForm.nick" ></Input>
            </div>
          </FormItem>
          <FormItem label="用户名：">
            <Input v-model="username" style="width: 250px" disabled></Input>
          </FormItem>
          <FormItem label="登录密码：">
            <Button type="text" size="small" @click="showEditPassword">修改密码</Button>
          </FormItem>
          <div>
            <Button type="primary" style="width: 100px;" :loading="save_loading" @click="saveEdit">保存</Button>
          </div>
        </Form>
      </Col>
    </Row>
    <Modal v-model="editPasswordModal" :closable='false' :mask-closable=false :width="500">
      <h3 slot="header" style="color:#2D8CF0">修改密码</h3>
      <Form ref="editPasswordForm" :model="editPasswordForm" :label-width="100" label-position="right" :rules="passwordValidate">
        <FormItem label="原密码" prop="oldPass" :error="oldPassError">
          <Input v-model="editPasswordForm.oldPass" placeholder="请输入现在使用的密码" type="password"></Input>
        </FormItem>
        <FormItem label="新密码" prop="newPass">
          <Input v-model="editPasswordForm.newPass" placeholder="请输入新密码，至少6位字符" type="password"></Input>
        </FormItem>
        <FormItem label="确认新密码" prop="rePass">
          <Input v-model="editPasswordForm.rePass" placeholder="请再次输入新密码" type="password"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelEditPass">取消</Button>
        <Button type="primary" :loading="savePassLoading" @click="saveEditPass">保存</Button>
      </div>
    </Modal>
  </Card>
</template>

<script>
  import ImageUpload from '../../components/customComponent/imageUpload'

  export default {
    name: 'base-set',
    data () {
      const valideRePassword = (rule, value, callback) => {
        if (value !== this.editPasswordForm.newPass) {
          callback(new Error('两次输入密码不一致'));
        } else {
          callback();
        }
      };
      return {
        userForm: {
          nick: '',
          head: null,
        },
        username: '',
        rolesName: [],
        save_loading: false,
        editPasswordModal: false, // 修改密码模态框显示
        savePassLoading: false,
        oldPassError: '',
        inforValidate: {
          nick: [
            { required: true, message: '请输入昵称', trigger: 'blur' }
          ]
        },
        editPasswordForm: {
          oldPass: '',
          newPass: '',
          rePass: ''
        },
        passwordValidate: {
          oldPass: [
            { required: true, message: '请输入原密码', trigger: 'blur' }
          ],
          newPass: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { min: 6, message: '请至少输入6个字符', trigger: 'blur' },
            { max: 32, message: '最多输入32个字符', trigger: 'blur' }
          ],
          rePass: [
            { required: true, message: '请再次输入新密码', trigger: 'blur' },
            { validator: valideRePassword, trigger: 'blur' }
          ]
        },
      };
    },
    watch: {},
    components:{ImageUpload},
    computed: {
    },
    methods: {
      showEditPassword () {
        this.editPasswordModal = true;
      },
      saveEdit () {
        this.$refs['userForm'].validate(async(valid) => {
          if (valid) {
            this.save_loading = true;
            /** dosomethings **/
            this.save_loading = false;

            this.$Message.success('修改成功');
          }
        });
      },
      saveEditPass () {
        this.$refs['editPasswordForm'].validate(async (valid) => {
          if (valid) {
            this.savePassLoading = true;
            /** dosomethings **/
            this.editPasswordModal = false;
            this.savePassLoading = false;
            this.$Message.success('修改成功');
            this.$refs['editPasswordForm'].resetFields();

          }
        });
      },
      async init () {
        this.userForm.nick = ''
        this.userForm.head = ''
        this.rolesName ='';
        this.username = ''
      },
      cancelEditPass () {
        this.editPasswordModal = false;
      }
    },
    created () {

    },
    mounted () {
      this.init();
    }
  }
</script>

<style scoped lang="less">
</style>
